<template>
  <Modal width="700px" :mask-closable="false" v-model="visible" :title="title">
    <Form
        ref="form"
        v-if="visible"
        class="form-container formList"
        :model="localForm"
        label-position="top"
        :rules="rules"
        style="max-height: 600px;overflow: auto;overflow-x:hidden;padding-right: 8px;display: flex;flex-wrap: wrap "
    >
      <Row :gutter="16" class-name="flex-row">
        <!--        <Col span="12">-->
        <!--          <FormItem-->
        <!--              label="批次号"-->
        <!--              required-->
        <!--              prop="warehouseType"-->
        <!--              class="custom-form-item"-->
        <!--          >-->
        <!--            <Input-->
        <!--                type="text"-->
        <!--                v-model="form.warehouseType"-->
        <!--                placeholder="批次号"-->
        <!--                class="inputBorder"-->
        <!--            ></Input></FormItem-->
        <!--          >-->
        <!--        </Col>-->

        <Col span="12">
          <FormItem
              label="业务类型"
              required
              prop="transferType"
              class="custom-form-item"
          >
            <Select v-model="localForm.transferType" disabled clearable>
              <Option
                  v-for="item of typeList"
                  :value="item.value"
                  :key="item.value"
              >{{ item.label }}
              </Option>
            </Select>
          </FormItem>
        </Col>

        <Col span="12">
          <FormItem
              label="工序订单"
              required
              prop="procedureOrderId"
              class="custom-form-item"
          >
            <Select v-model="localForm.procedureOrderId" clearable>
              <Option
                  v-for="item of procedureOrderList"
                  :value="item.id"
                  :key="item.id"
              >{{ item.planNo }}
              </Option>
            </Select>
          </FormItem>
        </Col>

<!--        required-->
<!--1-->
        <Col span="12">
          <FormItem
              label="出库储位"
              prop="sourceStorageId"
              class="custom-form-item"
          >
            <el-select size="small" v-model="localForm.sourceStorageId" placeholder="请选择" clearable
                       style="width: 317px">
              <el-option-group
                  v-for="group in wareList"
                  :key="group.label"
                  :label="group.label">
                <el-option
                    v-for="item in group.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-option-group>
            </el-select>
          </FormItem>
        </Col>

        <Col span="12">
          <FormItem
              label="入库储位"
              required
              prop="targetStorageId"
              class="custom-form-item"
          >
            <el-select size="small" v-model="localForm.targetStorageId" placeholder="请选择" clearable
                       style="width: 317px">
              <el-option-group
                  v-for="group in wareList"
                  :key="group.label"
                  :label="group.label">
                <el-option
                    v-for="item in group.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-option-group>
            </el-select>
          </FormItem>
        </Col>


        <Col span="24">
          <Col span="12" style="font-size: 18px">选择物料</Col>
          <Col span="12">
            <Button style="float: right" @click="addLoop">添加</Button>
          </Col>
        </Col>
      </Row>

      <Row :gutter="16" v-for="(item,index) of localForm.list" :key="index" style="padding-top: 5px;width: 100%">
        <Col span="12">
          <FormItem
              label="物料编码"
              required
              class="custom-form-item"
          >
            <Select v-model="item.materialId" clearable>
              <Option
                  v-for="item of materiaList"
                  :value="item.value"
                  :key="item.value"
              >{{ item.label }}
              </Option>
            </Select></FormItem
          >
        </Col>

        <Col span="10">
          <FormItem
              label="数量"
              required
              class="custom-form-item"
          >
            <Input
                type="number"
                v-model="item.materialCount"
                placeholder="请输入数量"
                class="inputBorder"
            ></Input></FormItem
          >
        </Col>

        <Col span="2">
          <Button style="margin-top: 23px" shape="circle" icon="md-close" @click="delLoop(index)"></Button>
        </Col>
        <Col span="12">
          <FormItem
              label="批次号"
              class="custom-form-item"
          >
            <Input
                v-model="item.batchNumber"
                placeholder="请输入批次号"
                class="inputBorder"
            ></Input></FormItem
          >
        </Col>
      </Row>


    </Form>
    <div slot="footer" v-if="visible">
      <Button type="default" @click="closeModal">取消</Button>
      <Button type="primary" @click="handleSubmit('form')">确定</Button>
    </div>
  </Modal>
</template>

<script>
export default {
  name: "CreateOrUpdateModal",
  props: {
    visible: Boolean,
    form: Object,
    title: String,
    handleAddSubmit: Function,
    typeList: Array,
    closeSubmit: Function,
    wareList: Array
  },
  data() {
    return {
      warehouseList: [],
      localForm: JSON.parse(JSON.stringify(this.form)), // 使用一个本地的data属性
      materiaList: [],
      procedureOrderList: [],
      rules: {
        procedureOrderId: [
          {required: true, message: "请选择工序订单", trigger: "blur"},
        ],
        transferType: [
          {required: true, message: "请选择业务类型", trigger: "blur"},
        ],
        // sourceStorageId: [
        //   {required: true, message: "请选择出库储位", trigger: "blur"},
        // ],
        targetStorageId: [
          {required: true, message: "请选择入库储位", trigger: "blur"},
        ]
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      // 获取仓库 储位
//       this.axios
//           .get("/api/basedataWarehouse/queryAll", {}).then(res => {
//         if (res.code == 200) {
//           const list = res.data
//           for (const item of list) {
//             item.options = item.storageVOList
//             item.value = item.id
//             item.label = item.warehouseName
// // 改造成上下级
//             for (const items of item.storageVOList) {
//               items.options = items.storageName
//               items.value = items.id
//               items.label = items.storageName
//             }
//             this.warehouseList = list
//           }
//         }
//       })
// 工序订单
      this.axios
          .post("/api/planProcedureOrder/getAll", {}).then(res => {
        if (res.code == 200) {
          const list = res.data
          const loop = []
          for (const item of list) {
            loop.push(
                {
                  value: item.id,
                  label: item.materialName
                }
            )
          }
          this.procedureOrderList = list;
        }
      })

      // 查询物料
      this.axios
          .post("/api/basedataMaterial/getAll", {}).then(res => {
        if (res.code == 200) {
          const list = res.data
          const loop = []
          for (const item of list) {
            loop.push(
                {
                  value: item.id,
                  label: item.materialName
                }
            )
          }
          this.materiaList = loop;
        }
      })
    },
    delLoop(e) {
      this.localForm.list.splice(e, 1);
    },
    addLoop() {
      const list = JSON.parse(JSON.stringify(this.localForm))
      list.list.push({
        materialCount: 1,
        materialId: null
      })
      this.localForm = list

    },
    closeModal() {
      this.localForm = {
        list: [
          {
            materialCount: 1,
            materialId: null
          }
        ],
        transferType: 'pick'
      }
      this.closeSubmit();
    },
    handleSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.handleAddSubmit(this.localForm);
        }
      });
    },
  },
};
</script>

<style scoped>
.form-container {
  flex-wrap: wrap; /* 允许子项换行 */
  justify-content: space-between; /* 子项之间的间隔 */
}

.form-container .form-item {
  flex: 1 0 48%; /* 每个表单项占据48%的宽度，剩余空间由space-between处理 */
  margin-bottom: 20px; /* 根据需要调整 */
}

/* 如果需要处理响应式布局，可以添加媒体查询 */
@media (max-width: 768px) {
  .form-container .form-item {
    flex: 1 0 100%; /* 在小屏幕上，每个表单项占据整行 */
  }

  .custom-form-item {
    width: 200px;
  }
}


.flex-row {
  display: flex !important;
}
</style>
